<template>

    <div>

        <el-card shadow="always" style="text-align: center">
            处罚管理
        </el-card>

        <div class="shousuo">
            <el-autocomplete
                    class="inline-input"
                    v-model="state1"
                    :fetch-suggestions="querySearch"
                    placeholder="姓名"
                    @select="" style="margin-right: 10px;margin-left: 20px">
                <i
                        class="el-icon-search el-input__icon"
                        slot="suffix"
                        @click="">
                </i>
            </el-autocomplete>

            <el-button type="primary" round style="margin-right: 5px;margin-left: 60px" icon="el-icon-plus"
                       @click="insertpunishment">新增
            </el-button>
            <el-button type="danger" round style="margin-right: 5px;" icon="el-icon-delete"
                       @click="">删除
            </el-button>

        </div>
        <el-table :data="tableData"
                  v-loading="hhhh"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)"
                  border
                  style="width: 100%;margin-top: 20px"
                  stripe
                  :header-cell-style="tableHeaderColor"
                  @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55"
            >
            </el-table-column>

            <el-table-column
                    fixed
                    prop="pid"
                    label="处罚单号"
                    align="center"
                    width="120">
            </el-table-column>

            <el-table-column
                    fixed
                    prop="name"
                    label="司机姓名"
                    align="center"
                    width="120">
            </el-table-column>

            <el-table-column
                    fixed
                    prop="driverId"
                    label="驾驶公交/路"
                    align="center"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="date"
                    label="处罚日期"
                    align="center"
                    width="90"
            >
            </el-table-column>
            <el-table-column
                    prop="message"
                    label="处罚信息"
                    align="center"
                    width="400"
            >
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作" :formatter="formatter">
                <template slot-scope="scope">
                    <el-button type="success" round @click="updatePunishment(scope.row)">修改</el-button>
                    <el-button type="danger" round @click="deleteInfo(scope.row.pid)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="urlparam.num"
                :page-sizes="[15, 30, 60, 120]"
                :page-size="urlparam.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tabletotal">

        </el-pagination>


        <!--修改对话框-->
        <el-dialog title="修改处罚信息" :visible.sync="dialogUpdate" width="550px">

            <el-form :model="punishmentForm"
                     element-loading-text="拼命加载中"
                     element-loading-spinner="el-icon-loading"
                     element-loading-background="rgba(0, 0, 0, 0.8)">

                <el-form-item label="处罚单号" :label-width="formLabelWidth">
                    <el-input v-model="punishmentForm.pid" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>

                <el-form-item label="操作日期" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="punishmentForm.date"
                            type="datetime"
                            placeholder="选择日期时间"
                            style="width: 300px"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="处罚信息" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :rows="3"
                            placeholder="请输入内容"
                            style="width: 300px"
                            v-model="punishmentForm.message">
                    </el-input>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdate = false">取 消</el-button>
                <el-button type="primary" @click="updateSubmit()">确 定</el-button>
            </div>

        </el-dialog>


        <!--新增对话框-->
        <el-dialog title="修改处罚信息" :visible.sync="dialogInsert" width="550px">

            <el-form :model="insertForm"
                     element-loading-text="拼命加载中"
                     element-loading-spinner="el-icon-loading"
                     element-loading-background="rgba(0, 0, 0, 0.8)">

                <el-form-item label="司机编号" :label-width="formLabelWidth">
                    <el-input v-model="insertForm.driverId" autocomplete="off" style="width: 300px"></el-input>
                </el-form-item>

                <el-form-item label="操作日期" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="insertForm.date"
                            type="datetime"
                            placeholder="选择日期时间"
                            style="width: 300px"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="处罚信息" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :rows="3"
                            placeholder="请输入内容"
                            style="width: 300px"
                            v-model="insertForm.message">
                    </el-input>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogInsert = false">取 消</el-button>
                <el-button type="primary" @click="insertpunishmentSubmit()">确 定</el-button>
            </div>

        </el-dialog>


    </div>


</template>

<script>
    export default {
        name: "PunishmentManagement",
        data() {
            return {
                hhhh: true,
                tableData: [],
                dialogUpdate: false,
                dialogInsert: false,
                loading: true,
                tabletotal: 0,
                urlparam: {
                    num: 1,
                    size: 15
                },
                punishmentForm: {
                    pid: '',
                    message: '',
                    date: '',
                    oldId: '',
                    name: '',
                    driverId: ''
                },
                insertForm: {
                    message: '',
                    date: '',
                    driverId: ''
                },
                formLabelWidth: '130px',
            }
        },
        created() {
            this.getAll();
        },
        methods: {
            getAll() {
                this.$http({
                    url: '/punishment/getAll',
                    method: 'GET',
                    params: this.urlparam
                }).then(result => {
                    console.log(result);
                    if (result.status == 200) {
                        this.tableData = result.data.list;
                        this.hhhh = false;
                        this.tabletotal = result.data.total;

                    } else {
                        this.$message({
                            showClose: true,
                            message: '发生了未知错误',
                            type: 'error'
                        })
                    }
                })
            },
            /*修改处罚信息*/
            updatePunishment(data) {
                /*pid: '',
                  message: '',
                  date: '',
                  oldId: '',
                  name:'',
                  name:''
                   },*/
                this.dialogUpdate = true
                this.punishmentForm.pid = data.pid
                this.punishmentForm.oldId = data.pid
                this.punishmentForm.driverId = data.driverId
                this.punishmentForm.message = data.message
                this.punishmentForm.date = data.date
                this.punishmentForm.name = data.name
                console.log(this.punishmentForm.oldId)

            },
            updateSubmit() {
                this.dialogUpdate = false;
                console.log(this.punishmentForm.oldId)
                this.$http({
                    url: '/punishment/updateOne',
                    method: 'put',
                    data: {
                        pid:parseInt(this.punishmentForm.pid),
                        message:this.punishmentForm.message,
                        date:this.punishmentForm.date,
                        oldId:parseInt(this.punishmentForm.oldId)
                    }

                }).then(result => {
                    if (result.status == 200) {
                        this.$message({
                            showClose: true,
                            message: '更新信息成功',
                            type: 'success'
                        });
                        this.getAll();
                    } else {
                        this.$message({
                            showClose: false,
                            message: '更新失败',
                            type: 'error'
                        });
                        this.getAll();
                    }
                })
            },

            /*增加处罚*/
            insertpunishment() {
                this.dialogInsert = true
                this.insertForm.pid = null
                this.insertForm.message = null
                this.insertForm.date = null
                this.insertForm.driverId = null

            },
            /*提交处罚*/
            insertpunishmentSubmit() {
                this.dialogInsert = false;
                this.$http({
                    url: 'punishment/insertOne',
                    method: 'POST',
                    params: {
                        driverId:this.insertForm.driverId,
                        date:this.insertForm.date,
                        message:this.insertForm.message
                    }
                }).then(result => {
                    console.log(result);
                    if (result.data > 0) {
                        this.$notify({
                            title: '成功',
                            message: '添加成功',
                            type: 'success'
                        })
                        this.getAll()
                    } else {
                        this.$notify({
                            title: '失败',
                            message: '编号为空',
                            type: 'error'
                        })
                        this.getAll()
                    }
                })
            },



            deleteInfo(pid) {
                console.log(pid)
                this.$http({
                    url: '/punishment/deleteOne/',
                    method: 'delete',
                    params: {
                        pid: pid
                    }
                }).then(result => {
                    if (result.status == 200) {
                        this.$message({
                            showClose: true,
                            message: '删除信息成功',
                            type: 'success'
                        });
                        this.getAll();
                    }
                })
            },

            tableHeaderColor({rowIndex}) {
                if (rowIndex === 0) {
                    return 'background-color: lightblue;color: #fff;font-weight: 500;height:51px'
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                let va = [];
                this.multipleSelection.map(item => {
                    va.push(item.id)
                })
                console.log(va);
                this.list = va;
            },
            handleCurrentChange(val) {
                this.urlparam.num = val;
                if (this.order == null) {
                    this.getAll();
                } else if (this.order == 'descending') {
                    console.log(val);
                    this.getDec();
                } else if (this.order == 'ascending') {
                    this.getAsc();
                }
            },
            handleSizeChange(val) {
                this.urlparam.size = val;
                if (this.order == null) {
                    this.getAll();
                } else if (this.order == 'descending') {
                    console.log(val);
                    this.getDec();
                } else if (this.order == 'ascending') {
                    this.getAsc();
                }

            }

        }
    }
</script>

<style scoped>
    .shousuo {
        margin: 10px;
    }
</style>
